<template>

    <button @click="changeNode">修改节点颜色事件</button>

    <h2>添加自定义连接线</h2>

    <div id="chart-diagram" style="background-color: whitesmoke; width: 1000px; height: 1000px;">
    </div>


</template>

<script setup>
    import {onMounted} from 'vue';
    import go from "gojs";

    let myDiagram = null;


    const changeNode = () => {
        var data = myDiagram.model.findNodeDataForKey("Delta");
        // 这个方式可以更新
        if (data !== null) myDiagram.model.setDataProperty(data, "color", "red");
    }

    const init = () => {

        const $ = go.GraphObject.make

        myDiagram = new go.Diagram("chart-diagram", {
            'grid.visible': true, // 显示网格
            'clickCreatingTool.archetypeNodeData': {category: 'Normal', text: '新节点', notice: ''}, // 双击新建节点(可以写入节点的默认信息)；；
            'toolManager.hoverDelay': 100, // tooltip提示显示延时
            'toolManager.toolTipDuration': 10000, // tooltip持续显示时间
            allowMove: true, // 允许拖动画板
            allowDragOut: true, // 允许拖拽节点
            allowDelete: true, // 允许删除节点
            allowCopy: true, // 允许复制节点
            allowClipboard: true, // 允许粘贴节点

        });

        function makePort(name, spot, output, input) {
            // the port is basically just a small circle that has a white stroke when it is made visible
            return $(go.Shape, "Circle",
                {
                    fill: "#ffff00",
                    stroke: null,  // this is changed to "white" in the showPorts function
                    desiredSize: new go.Size(8, 8),
                    alignment: spot, alignmentFocus: spot,  // align the port on the main Shape
                    portId: name,  // declare this object to be a "port"
                    fromSpot: spot, toSpot: spot,  // declare where links may connect at this port
                    fromLinkable: output, toLinkable: input,  // declare whether the user may draw links to/from here
                    cursor: "pointer"  // show a different cursor to indicate potential link point
                });
        }

        var lightText = 'whitesmoke';

        function nodeStyle() {
            return [
                // The Node.location comes from the "loc" property of the node data,
                // converted by the Point.parse static method.
                // If the Node.location is changed, it updates the "loc" property of the node data,
                // converting back using the Point.stringify static method.
                new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                {
                    // the Node.location is at the center of each node
                    locationSpot: go.Spot.Center,
                    //固定连接点位置
                    fromSpot: go.Spot.RightCenter,
                    toSpot: go.Spot.LeftCenter


                }
            ];
        }

        myDiagram.nodeTemplateMap.add("",  // the default category
            $(go.Node, "Spot", nodeStyle(),
                // the main object is a Panel that surrounds a TextBlock with a rectangular Shape


                {
                    linkValidation: function (fromnode, fromport, tonode) {
                        // total number of links connecting with all ports of a node is limited to 1:
                        console.log("fromnode==========",fromnode.linksConnected.count)
                        console.log("tonode==========",tonode.linksConnected.count)
                        return fromnode.linksConnected.count + tonode.linksConnected.count < 2;
                    }
                },


                $(go.Panel, "Auto",
                    $(go.Shape, "Rectangle",
                        {fill: "#00A9C9", stroke: null},
                        new go.Binding("figure", "figure")),
                    $(go.TextBlock,
                        {
                            font: "bold 11pt Helvetica, Arial, sans-serif",
                            stroke: lightText,
                            margin: 8,
                            maxSize: new go.Size(160, NaN),
                            wrap: go.TextBlock.WrapFit,
                            editable: true
                        },
                        new go.Binding("text").makeTwoWay())
                ),
                // four named ports, one on each side:
                makePort("T", go.Spot.Top, true, true),
                makePort("L", go.Spot.Left, true, true),
                makePort("R", go.Spot.Right, true, true),
                makePort("B", go.Spot.Bottom, true, true)
            ));


        myDiagram.linkTemplate =
            $(go.Link,  // the whole link panel
                {
                    routing: go.Link.Orthogonal, // 线会自动90度转弯（AvoidsNodes自动绕开节点）
                    curve: go.Link.JumpGap, // 线与线相交会自动不重叠（还有go.Link.Bezier贝塞尔曲线）
                    corner: 3, // 拐角弧度
                    toEndSegmentLength: 30, //目的点线的固定距离（如果设置了自动拐角就是最短距离）
                    fromEndSegmentLength: 30, //出发点线的固定距离（如果设置了自动拐角就是最短距离）

                    zOrder: -111, //图像层级
                    selectable: true, //连接线是否可选
                    fromSpot: go.Spot.LeftRightSides, //连线出发点强制为（new go.Spot(0.5, 0.5, 0, -25)为自定义）
                    toSpot: go.Spot.LeftRightSides, //连线目的点强制为

                    adjusting: go.Link.Stretch,
                    fromMaxLinks: 1,  //限制一个连接点的连接次数
                    toMaxLinks: 1,  //限制一个连接点的连接次数
                    // mouse-overs subtly highlight links:
                    mouseEnter: function (e, link) {
                        link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)";
                    },
                    mouseLeave: function (e, link) {
                        link.findObject("HIGHLIGHT").stroke = "transparent";
                    }
                },
                new go.Binding("points").makeTwoWay(),
                $(go.Shape,  // the highlight shape, normally transparent
                    {isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT"}),
                $(go.Shape,  // the link path shape
                    {isPanelMain: true, stroke: "gray", strokeWidth: 2}),
                $(go.Shape,  // the arrowhead
                    {toArrow: "standard", stroke: null, fill: "gray"}),
                $(go.Panel, "Auto",  // the link label, normally not visible
                    {visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5},
                    new go.Binding("visible", "visible").makeTwoWay(),
                    $(go.Shape, "RoundedRectangle",  // the label shape
                        {fill: "#F8F8F8", stroke: null}),
                    $(go.TextBlock, "Yes",  // the label
                        {
                            textAlign: "center",
                            font: "10pt helvetica, arial, sans-serif",
                            stroke: "#333333",
                            editable: true
                        },
                        new go.Binding("text").makeTwoWay())
                )
            );


        myDiagram.linkTemplate =
            $(go.Link,
// default routing is go.Link.Normal
// default corner is 0
                {routing: go.Link.Orthogonal, corner: 5},
                $(go.Shape, {strokeWidth: 3, stroke: "#ff00ff"}), // the link shape
// if we wanted an arrowhead we would also add another Shape with toArrow defined:
                $(go.Shape, { toArrow: "Standard", stroke: null })
            );


        var nodeDataArray = [
            {key: "Alpha1", color: "lightblue"},  // 这边的值会被遍历循环
            {key: "Beta1", color: "pink"},  // 这边的值会被遍历循环
            {key: "node1", color: "yellow"},  // 这边的值会被遍历循环
            {key: "node2", color: "green"},  // 这边的值会被遍历循环
            {key: "node3", color: "red"},  // 这边的值会被遍历循环
            {key: "node4", color: "blue"}
        ];
        var linkDataArray = [{from: "Alpha1", to: "Beta1"}];
        myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
        //


    }
    onMounted(() => {
        init();
    });


</script>

<style scoped>

</style>